<template>
  <div class="favorites-page">
    <div class="content-wrapper">
      <div class="title-box">
        <h1>收藏动态</h1>
      </div>
      <div v-if="loading || error" class="message-box">
        <div v-if="loading" class="loading">加载中...</div>
        <div v-if="error" class="error">{{ error }}</div>
      </div>
      <div v-if="!loading && !error">
        <transition-group name="list" tag="ul" class="news-list">
          <li v-for="item in favorites" :key="item.id" class="news-item">
            <div class="news-content">
              <h2>{{ item.title }}</h2>
              <p>{{ item.summary }}</p>
              <div class="meta">
                <span>作者：{{ item.author }}</span>
                <span>日期：{{ item.date }}</span>
              </div>
              <div class="item-footer">
                <div class="likes">
                  <font-awesome-icon icon="thumbs-up" /> {{ item.likes }}
                </div>
              </div>
            </div>
            <button @click="removeFavorite(item)" class="uncollect-button">
              <span class="uncollect-icon">&#x2715;</span>
            </button>
          </li>
        </transition-group>
      </div>
    </div>
    <div v-if="message" class="message-popup" :class="{ 'error': isError }">
      {{ message }}
    </div>
  </div>
</template>

<script>
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faThumbsUp } from '@fortawesome/free-solid-svg-icons'
import axios from 'axios';
import { BASE_URL } from '@/config.js';
library.add(faThumbsUp)

export default {
  name: 'FavoritesPage',
  components: {
    'font-awesome-icon': FontAwesomeIcon
  },
  data() {
    return {
      userId: null,
      favorites: [],
      loading: true,
      error: '',
      message: '',
      isError: false
    }
  },
  mounted() {
    const userId = localStorage.getItem('userId');
    if (!userId) {
      this.error = '用户未登录';
      this.loading = false;
      return;
    }
    this.userId = userId;
    this.fetchFavorites();
  },
  methods: {
    fetchFavorites() {
      fetch(`${BASE_URL}/api/users/${this.userId}/favorites`)// 替换为你的 API 地址
        .then(response => response.json())
        .then(data => {
          this.favorites = data.map(item => ({ ...item, isFavorite: true }));
          this.loading = false;
        })
        .catch(err => {
          this.error = '获取收藏失败';
          this.loading = false;
        });
    },
    removeFavorite(item) {
      fetch(`${BASE_URL}/api/news/${item.id}/delete_favorite`, {// 替换为你的 API 地址
        method: 'DELETE',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ userId: this.userId })
      })
        .then(response => {
          if (response.ok) {
            return response.json();
          }
          throw new Error('取消收藏失败');
        })
        .then(data => {
          this.favorites = this.favorites.filter(f => f.id !== item.id);
          this.showMessage('取消收藏成功', false);
        })
        .catch(err => {
          this.showMessage(err.message, true);
        });
    },
    showMessage(msg, isError) {
      this.message = msg;
      this.isError = isError;
      setTimeout(() => {
        this.message = '';
      }, 3000);
    }
  }
}
</script>

<style scoped>
.favorites-page {
background-image: url('@/assets/s5.jpg'); 
background-repeat: no-repeat; /* 背景图不重复 */
background-size: cover; /* 背景图覆盖整个区域 */
background-position: center; /* 背景图居中 */
background-attachment: fixed; /* 背景图固定 */
  min-height: 100vh;
  padding: 80px 20px;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.content-wrapper {
  width: 100%;
  max-width: 800px;
  /* background: rgba(255, 255, 255, 0.7); */
  border-radius: 30px;
  padding: 40px;
  /* box-shadow: 0 10px 30px rgba(0,0,0,0.1); */
}

.title-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin: 0 auto 10px;
  /* background: linear-gradient(45deg, #5e4b3c, #8b4513);  */
  border-radius: 20px;
  padding: 15px 30px;
}

.title-box h1 {
  color: #be682b;
  font-size: 2.5em;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
  margin: 0;
}

.message-box {
  text-align: center;
  font-family: Arial, sans-serif;
  color: #c1a87d;
  font-size: 1.2em;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  border-radius: 20px;
}

.news-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.news-item {
  background: rgba(45, 45, 45, 0.9);
  font-family: Arial, sans-serif;
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 15px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(15px);
  padding: 25px;
  position: relative;
}

.news-content {
  position: relative;

  z-index: 1;
}

.news-item h2 {
  color: #f5e4c3;
  font-family: Arial, sans-serif;
  font-size: 1.3em;
  margin-bottom: 20px;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

.news-item p {
  color: #c1a87d;
  font-family: Arial, sans-serif;
  margin: 10px 0;
  line-height: 1.6;
}

.meta {
  display: flex;
  justify-content: space-between;
  margin: 15px 0;
  /* font-family: Arial, sans-serif; */
  color: #b3815c;
  font-size: 14px;
}

.item-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
  border-top: 1px solid #dfe6e9;
}

.likes {
  display: flex;
  align-items: center;
  font-size: 16px;
  margin-top:8px;
  color: #9c5554;
}

.likes svg {
  margin-right: 8px;
  color: #fff566;
}

.uncollect-button {
  position: absolute;
  top: 15px;
  right: 15px;
  padding: 10px;
  background-color: rgba(179, 80, 69, 0.8);
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  overflow: hidden;
  backdrop-filter: blur(5px);
  z-index: 2;
}

.uncollect-button:hover
{
  width: auto;
  padding: 10px 15px;
  border-radius: 20px;
  font-size: 1em;
}

.uncollect-icon {
  font-size: 1.2em;
}

.uncollect-button:hover .uncollect-text,
.question-box:hover .uncollect-button .uncollect-text {
  display: inline;
}

.uncollect-text {
  display: none;
  margin-left: 5px;
}

.uncollect-button:hover .uncollect-text,
.news-item:hover .uncollect-button .uncollect-text {
  display: inline;
}

.message-popup {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 20px;
  border-radius: 5px;
  background-color: rgba(179, 80, 69, 0.8);
  color: white;
  z-index: 1000;
  backdrop-filter: blur(10px);
}

.message-popup.error {
  background-color: rgba(231, 76, 60, 0.9);
}

.list-enter-active, .list-leave-active {
  transition: all 0.5s;
}

.list-leave-active {
  position: absolute;
}

.list-enter, .list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}

@media (max-width: 768px) {
  .content-wrapper {
    padding: 20px;
  }
}
</style>